    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>鼠标跟随</title>
        <style>
            html,body{
                cursor: wait;
            }
            *{
                margin: 0;
                padding: 0;
            }
            img{
                width: 200px;
                height: 100px;
                top: 0;
                left: 0;
                position: absolute;
            }
        </style>
    </head>
    <body>
    <img src="imgs/long.jpg" alt="">
    <script>
        // 需求：点击鼠标，图片跟随，形成一龙戏珠的动态图片感觉
        //首先获取鼠标的xy值，然后将xy值赋给图片。在传送机制上要选用缓动函数
        //老五部event=event||window.event
        //然后获取xy值要注意兼容性写法：pagey=event.pageY||scroll().top+event.client x坐标类似

        var img=document.getElementsByTagName('img')[0];
        var presenty=0; var presentx=0;var timer=null; var targety=0;var targetx=0;
        console.log(img.offsetTop);
        console.log(img.offsetLeft);
        document.onclick=function (event) {
        event=event||window.event;
        var pagey=event.pageY||scroll().top+event.clientY;
        var pagex=event.pageX||scroll().left+event.clientX;
            console.log(pagey); console.log(pagex);
            targety=pagey-img.offsetHeight/2;
            targetx=pagex-img.offsetWidth/2;
            clearInterval(timer);
            timer=setInterval(function () {
                var spacey=(targety-presenty)/10;
                spacey=spacey>0?Math.ceil(spacey):Math.floor(spacey);
                presenty=presenty+spacey;
                img.style.top=presenty+'px';


                var spacex=(targetx-presentx)/10;
                spacex=spacex>0?Math.ceil(spacex):Math.floor(spacex);
                presentx=presentx+spacex;
                img.style.left=presentx+'px';
                // if (Math.abs(targetx-presentx)<=Math.abs(spacex)||Math.abs(targety-presenty)<=Math.abs(spacey)){
                //     img.style.left=presentx+'px';
                //     img.style.top=presenty+'px';
                //     clearInterval(timer);
                // }
            },10)



        }


    </script>
    </body>
    </html>